 <template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
            <el-form-item label="  活动名称">
              <br> <br>
                <el-input v-model="formInline.activityName" placeholder clearable style="margin-left:-70px;width:200px"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:20px;">
                <el-form-item label="  状态：">
                  <br> <br>
                    <el-select v-model="formInline.status" style="margin-left:-70px;width:200px">
                        <el-option label="全部" value></el-option>
                        <el-option label="已发布" value="1"></el-option>
                        <el-option label="未发布" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form-item>
            <div style="width:100%;display:flex;justify-content:flex-end;">
              <el-form-item>
                <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增活动</el-button>
              </el-form-item>
            </div>
            
        </el-form>
        <el-table
            :data="tableData"
            style="width: 100%;"
            border
            v-loading="loading"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column>
            <el-table-column prop="activityName" label="活动名称" width="250"></el-table-column>
            <el-table-column prop="activityDesc" label="活动描述" width="250" show-overflow-tooltip></el-table-column>
            <el-table-column prop="score" label="单次消耗酒币" width="150" align="center"></el-table-column>
            <el-table-column prop="status" label="发布状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status===0">未发布</span>
                    <span v-if="scope.row.status===1">已发布</span>
                </template>
            </el-table-column>
            <el-table-column prop="activityBeginTime" label="活动开始时间" width="160"></el-table-column>
            <el-table-column prop="activityEndTime" label="活动结束时间" width="160"></el-table-column>
            <el-table-column prop="cashDeadline" label="兑奖截止日期" width="160" :formatter="fixData"></el-table-column>
            <!-- <el-table-column prop="createUser" label="创建人" width="180"></el-table-column> -->
            <el-table-column label="操作" fixed="right" align="center" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="seedetail(scope.row)" type="text">查看详情</el-button>
                    <el-button
                        size="mini"
                        @click="edit(scope.row)"
                        type="text"
                        v-if="scope.row.status == '0'"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        @click="updatePlanStatus(scope.row.uuid, '1')"
                        v-if="scope.row.status == '0'"
                    >发布</el-button>
                    <el-button
                        type="text"
                        @click="updatePlanStatus(scope.row.uuid, '0')"
                        v-if="scope.row.status == '1'"
                    >撤回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top:2px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

   <script>
import { qryActivityConfig, editByUuid } from "@/api/lotteryActivityset";
export default {
  data() {
    return {
      formInline: { activityName: "", status: "" },
      loading: false,
      tableData: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      }
    };
  },
  mounted() {
    this._qryActivityConfig();
  },
  methods: {
    kong() {
      this.formInline.activityName = "";
      this.formInline.status = "";
    },
    _qryActivityConfig() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          activityName: this.formInline.activityName,
          activityBeginTime: "",
          activityEndTime: "",
          status: this.formInline.status
        },

        ascs: [],
        descs: []
      };

      qryActivityConfig(data).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    updatePlanStatus(activeId, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤销";
      }
      this.$confirm("确定" + msg + "当前方案吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            activeId: activeId,
            activityType: 1,
            status: status
          };
          editByUuid(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this._qryActivityConfig();
            } else {
              this.$message.error(res.message);
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this._qryActivityConfig();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this._qryActivityConfig();
    },
    seedetail(v) {
      this.$router.push({
        name: "lotteryActivitysetedit",
        params: {
          flag3: true,
          edit: v
        }
      });
    },
    search() {
      this._qryActivityConfig();
    },
    add() {
      this.$router.push({
        name: "lotteryActivitysetedit",
        params: {
          // flag3: false
        }
      });
    },
    edit(v) {
      this.$router.push({
        name: "lotteryActivitysetedit",
        params: {
          edit: v
        }
      });
    },
    fixData(row, column, cellValue, index) {
      if (cellValue != null ) {
        return cellValue.slice(0,10);
      } else {
        return cellValue;
      }
    }
  }
};
</script>
